<template>
  <div>
    <el-button @click="handleAdd()">
      新增配置
      <el-icon>
        <Plus/>
      </el-icon>
    </el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="服务端IP" prop="inetHost">
        <template v-slot="scope">
          <el-input
              v-if="scope.row.edit"
              v-model="scope.row.inetHost"
              placeholder="服务端IP"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="服务端端口" prop="inetPort">
        <template v-slot="scope">
          <el-input
              v-if="scope.row.edit"
              v-model="scope.row.inetPort"
              placeholder="服务端端口"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="客户端端ID" prop="clientId">
        <template v-slot="scope">
          <el-input
              v-if="scope.row.edit"
              v-model="scope.row.clientId"
              placeholder="客户端端ID"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="令牌key" prop="appKey">
        <template v-slot="scope">
          <el-input
              v-if="scope.row.edit"
              v-model="scope.row.appKey"
              placeholder="令牌key"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="令牌密钥" prop="appSecret">
        <template v-slot="scope">
          <el-input
              v-if="scope.row.edit"
              v-model="scope.row.appSecret"
              placeholder="令牌密钥"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="连接状态" prop="connectStatus"/>
      <el-table-column label="配置类型" prop="type"/>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search"/>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.edit">
            Edit
            <el-icon>
              <Edit/>
            </el-icon>
          </el-button>
          <el-button size="small" @click="handleSubmit(scope.$index, scope.row)" v-if="scope.row.edit">
            submit
            <el-icon><Select/></el-icon>
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >Delete
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  data: () => ({
    description: "客户端生成code工厂",
    buttons: {
      generate: {name: "生成代码"},
    },
    // type 0:目录 1：菜单 2：按钮
    type: "1",
    icon: "HotWater",
    name: "客户端生成code工厂",
  }),
};
</script>

<script setup>

import {onMounted, reactive, ref, toRefs} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const rules = {
  inetHost: [
    {
      required: true,
      message: "请输入服务端IP",
      trigger: "blur",
    },
  ],
  inetPort: [
    {
      required: true,
      message: "请输入服务端端口",
      trigger: "blur",
    },
  ],
};

const search = ref('')

const tableData = ref([]);

/**
 * 新增配置
 */
const handleAdd = () => {
  tableData.value.push({
    namespace:"DEFAULT",
    inetHost: "",
    inetPort: "",
    clientId: "",
    appKey: "",
    appSecret: "",
    edit: true
  });
}
/**
 * 编辑配置
 * @param index
 * @param row
 */
const handleEdit = (index, row) => {
  row.edit = true;
  console.log(index, row)
}

/**
 * 提交更改
 * @param index
 * @param row
 */
const handleSubmit = (index, row) => {
  row.edit = false;
  console.log(index, row)
  // 保存数据
  doStory(row);
  // 获取新的数据
  findList();
}
/**
 * 删除配置
 * @param index
 * @param row
 */
const handleDelete = (index, row) => {
  console.log(index, row)
  axios.delete("/v1/api/lazy/netty/server/properties/remove", {params:row}).then(res => {
    const {status, data} = res;
    const {code, message} = data;
    if (status === 200 && code === 0) {
      ElMessage({
        message: '修改配置成功',
        type: 'success',
      })
      // 获取新的数据
      findList();
    } else {
      ElMessage.error('修改配置失败:' + message)
    }
  });

}
/**
 * 初始化
 */
onMounted(async () => {
  findList();
});
/**
 * 获取所有配置信息
 */
const findList = () => {
  // 查询数据表信息
  axios.get('/v1/api/lazy/netty/server/properties/findList', {
    params: {
      instanceId: "",
      schema: "",
    }
  }).then(res => {
    if (res.status === 200 && res.data) {
      res.data.data.map((item) => {
        item.edit = false;
      });
      tableData.value = res.data.data ? res.data.data : [];
    } else {
      console.error(res);
    }
  })
};


/**
 * @description:提交
 * @return {*}
 */
const doStory = (row) => {
  axios.post("/v1/api/lazy/netty/server/properties/story", row).then(res => {
    const {status, data} = res;
    const {code, message} = data;
    if (status === 200 && code === 0) {
      ElMessage({
        message: '新增、修改配置成功',
        type: 'success',
      })
      // 获取新的数据
      findList();
    } else {
      ElMessage.error('新增、修改配置失败:' + message)
    }
  })
};
</script>

<style lang="scss" scoped></style>
